<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div id="question"></div>
            <!-- <div class="q_con">
                （<span class="q_type">单选题</span>）
                <span class="q_title">费大幅老电脑撒发快递拉风拿卡了？</span><span class="q_score">3分</span>
            </div>
            <ul class="a_con">
                <li><input type="radio" name="a" value="nan" answeritemid="345678932332" isright="true"
                        title="A">&nbsp;&nbsp;<span>刘备</span></li>
                <li><input type="checkbox" name="a" value="nan" answeritemid="345678932332" isright="true"
                        title="A">&nbsp;&nbsp;<span>刘备</span></li>
                <li><input type="checkbox" name="a" value="nan" answeritemid="345678932332" isright="true"
                        title="A">&nbsp;&nbsp;<span>刘备</span></li>
                <li><input type="radio" name="a" value="nan" answeritemid="345678932332" isright="true"
                        title="A">&nbsp;&nbsp;<span>刘备</span></li>
            </ul>
            <div class="a_btn">
                <button class="layui-btn " id="lastbtn">
                    <i class="layui-icon">&#xe603; 上一题</i>
                </button>
                <button class="layui-btn" type="button" id="nextbtn">
                    <i class="layui-icon">下一题 &#xe602;</i>
                </button>
                <button class="layui-btn" type="button" id="ok">
                    <i class="layui-icon">提交 &#xe605;</i>
                </button>
            </div> -->
            <script id="questiontpl" type="text/html">
                <div class="q_con" questionid="{{ID}}">
                    {{if QuestionType == 0}}
                    （<span class="q_type">单选题</span>）
                    {{else}}
                    （<span class="q_type">多选题</span>）
                    {{/if}}
                    <span class="q_title">{{Title}}</span><span class="q_score">&nbsp;&nbsp;（{{Score}}分）</span>
                </div>
                <ul class="a_con">
                    {{if QuestionType == 0}}
                    {{each QuestionContents as item index}}
                    <li><input type="radio" name="a"
                            value="{{item.Name}}">&nbsp;&nbsp;<span>{{item.Name}}&nbsp;&nbsp;{{item.Content}}</span>
                    </li>
                    {{/each}}
                    {{else}}
                    {{each QuestionContents as item index}}
                    <li><input type="checkbox" name="a"
                            value="{{item.Name}}">&nbsp;&nbsp;<span>{{item.Name}}&nbsp;&nbsp;{{item.Content}}</span>
                    </li>
                    {{/each}}
                    {{/if}}
                </ul>
            </script>
            <div class="a_btn">
                <button class="layui-btn" type="button" id="lastbtn">
                    <i class="layui-icon">&#xe603; 上一题</i>
                </button>
                <button class="layui-btn" type="button" id="nextbtn">
                    <i class="layui-icon">下一题 &#xe602;</i>
                </button>
                <button class="layui-btn" type="button" id="ok">
                    <i class="layui-icon">提交 &#xe605;</i>
                </button>
            </div>
        </div>
    </div>
</div>
<script>
    let TokenStr = "";
    let TimusID = "83d5d3b9-842c-477e-b22a-f6153648775f";
    let ExaminationStudentId = "";
    let Questions = [];
    let Question_Index = 0;
    let Answers = [];

    let CurrQuestionID = "";
    let CurrAnswer = "";

    login();
    getquestionlist();
    if (Questions.length > 0) {
        init(Question_Index);
    }

    $("#lastbtn").click(function (e) {
        let fileitems = $(".a_con input:checked")
        if (Questions.length > 0) {
            if (Question_Index > 0) {
                // if (fileitems.length > 0) {
                CurrAnswer = "";
                removeid(CurrQuestionID);
                for (let i of fileitems) {
                    CurrAnswer += i.value + ",";
                }
                CurrAnswer = CurrAnswer.substring(0, CurrAnswer.lastIndexOf(','));
                Answers.push({
                    "Id": CurrQuestionID,
                    "Answer": CurrAnswer
                });
                Question_Index--;
                init(Question_Index);
                // } else {
                //     layer.open({
                //         content: "请选择答案",
                //         skin: 'msg my-btn',
                //         time: 2000
                //     });
                // }
            } else {
                layer.open({
                    content: "已经是第一题了",
                    skin: 'msg my-btn',
                    time: 2000
                });
                // if (fileitems.length > 0) {
                CurrAnswer = "";
                removeid(CurrQuestionID);
                for (let i of fileitems) {
                    CurrAnswer += i.value + ",";
                }
                CurrAnswer = CurrAnswer.substring(0, CurrAnswer.lastIndexOf(','));
                Answers.push({
                    "Id": CurrQuestionID,
                    "Answer": CurrAnswer
                });
                // } else {
                //     layer.open({
                //         content: "请选择答案",
                //         skin: 'msg my-btn',
                //         time: 2000
                //     });
                // }
            }
        }
    });

    $("#nextbtn").click(function (e) {
        let fileitems = $(".a_con input:checked")
        if (Questions.length > 0) {
            if (Question_Index < Questions.length - 1) {
                if (fileitems.length > 0) {
                    CurrAnswer = "";
                    removeid(CurrQuestionID);
                    for (let i of fileitems) {
                        CurrAnswer += i.value + ",";
                    }
                    CurrAnswer = CurrAnswer.substring(0, CurrAnswer.lastIndexOf(','));
                    Answers.push({
                        "Id": CurrQuestionID,
                        "Answer": CurrAnswer
                    });
                    Question_Index++;
                    init(Question_Index);
                } else {
                    layer.open({
                        content: "请选择答案",
                        skin: 'msg my-btn',
                        time: 2000
                    });
                }
            } else {
                if (fileitems.length > 0) {
                    layer.open({
                        content: "已经是最后一题了",
                        skin: 'msg my-btn',
                        time: 2000
                    });
                    CurrAnswer = "";
                    removeid(CurrQuestionID);
                    for (let i of fileitems) {
                        CurrAnswer += i.value + ",";
                    }
                    CurrAnswer = CurrAnswer.substring(0, CurrAnswer.lastIndexOf(','));
                    Answers.push({
                        "Id": CurrQuestionID,
                        "Answer": CurrAnswer
                    });
                } else {
                    layer.open({
                        content: "请选择答案",
                        skin: 'msg my-btn',
                        time: 2000
                    });
                }
            }
        }
    });

    $("#ok").click(function (e) {
        if (Questions.length == Answers.length) {
            $.ajax({
                type: "POST",
                url: layui.setter.url1 + '/api/Examination/Commit',
                contentType: 'application/json',
                headers: {
                    "Authorization": TokenStr
                },
                data: JSON.stringify({
                    "Data": Answers,
                    "ExaminationStudentId": ExaminationStudentId
                }),
                success: function (res) {
                    let data = jQuery.parseJSON(res);
                    // console.log(data);
                    if (data.Code == 200) {
                        layer.open({
                            tittle: "信息",
                            type: 0,
                            content: "提交成功"
                        });
                    } else {
                        layer.open({
                            tittle: "错误",
                            type: 0,
                            content: data.Msg
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.open({
                        tittle: "错误",
                        type: 0,
                        content: "调用接口异常"
                    });
                }
            });
        } else {
            layer.open({
                content: "请回答所有问题！",
                skin: 'msg my-btn',
                time: 2000
            });
        }
    });

    function init(index) {
        $("#question").empty();
        $("#question").append(template('questiontpl', Questions[index]));
        CurrQuestionID = $(".q_con").attr("questionid");
        checked(CurrQuestionID);
    }

    function checked(id) {
        let fileitems = $(".a_con input")
        for (let i of fileitems) {
            let tempvalue = returnanswer(id).split(",");
            for (let j of tempvalue) {
                if (i.value == j) {
                    i.checked = true;
                }
            }
        }
    }

    function removeid(id) {
        for (var i = 0; i < Answers.length; i++) {
            if (Answers[i].Id == id) { //item.id==122
                Answers.splice(i, 1)
            }
        }
    }

    function returnanswer(id) {
        let tempanswer = "";
        for (var i = 0; i < Answers.length; i++) {
            if (Answers[i].Id == id) { //item.id==122
                tempanswer = Answers[i].Answer;
                break;
            }
        }
        return tempanswer;
    }

    function getquestionlist() {
        $.ajax({
            type: "POST",
            url: layui.setter.url1 + '/api/Examination/QuestionList',
            contentType: 'application/json',
            async: false,
            headers: {
                "Authorization": TokenStr
            },
            data: JSON.stringify({
                "Id": TimusID
            }),
            success: function (res) {
                let data = jQuery.parseJSON(res);
                console.log(data);
                if (data.Code == 200) {
                    ExaminationStudentId = data.Data.ExaminationStudentId;
                    Questions = data.Data.Timus;
                } else {
                    layer.open({
                        tittle: "错误",
                        type: 0,
                        content: data.Msg
                    });
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.open({
                    tittle: "错误",
                    type: 0,
                    content: "调用接口异常"
                });
            }
        });
    }

    function login() {
        var fromData = new FormData();
        fromData.append("userid", "xuesheng");
        fromData.append("password", "123456");
        fromData.append("cookie", false);
        fromData.append("rememberLogin", false);
        $.ajax({
            type: "POST",
            url: layui.setter.url1 + '/api/_login/Login',
            async: false,
            contentType: false,
            processData: false,
            dataType: "json",
            mimeType: "multipart/form-data",
            data: fromData,
            success: function (res) {
                if (res) {
                    TokenStr = res.token_type + " " + res.access_token;
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.open({
                    tittle: "错误",
                    type: 0,
                    content: "调用接口异常"
                });
            }
        });
    }
</script>